<template>
    <div class="sales-detail-container" style="height: 800px;">
        <!-- 查询条件区域 -->
        <div class="search-area">
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="单据日期">
                    <el-date-picker
                        v-model="searchForm.dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item label="客户">
                    <el-input v-model="searchForm.customer" placeholder="请输入客户" />
                </el-form-item>
                <el-form-item label="商品">
                    <el-input v-model="searchForm.goods" placeholder="请输入商品" />
                </el-form-item>
                <el-form-item label="销售人员">
                    <el-input v-model="searchForm.salesman" placeholder="请输入销售人员" />
                </el-form-item>
                <el-form-item label="制单人">
                    <el-select v-model="searchForm.maker" placeholder="请选择制单人">
                        <el-option label="空" value="空" />
                        <!-- 可根据实际需求补充更多选项 -->
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">
                        <i class="el-icon-search"></i> 查询
                    </el-button>
                    <el-button @click="handleExpand">
                        <i class="el-icon-arrow-down"></i> 展开条件
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 列设置按钮 -->
        <div class="column-setting">
            <el-button type="text" @click="handleColumnSetting">
                <i class="el-icon-setting"></i> 列设置
            </el-button>
        </div>

        <!-- 表格标题和操作按钮 -->
        <div class="table-header flex justify-between items-center mb-4">
            <h3 class="text-lg font-bold text-gray-800">商品销售明细表</h3>
            <div class="flex space-x-2">
                <el-button type="primary" @click="handleExport">
                    <i class="el-icon-download"></i> 导出
                </el-button>
                <el-button @click="handlePrint">
                    <i class="el-icon-printer"></i> 打印
                </el-button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <el-table
                :data="tableData"
                border
                stripe
                fit
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    prop="saleDate"
                    label="销售日期"
                    min-width="120"
                />
                <el-table-column
                    prop="saleOrderNo"
                    label="销售单据号"
                    min-width="140"
                />
                <el-table-column
                    prop="businessType"
                    label="业务类别"
                    min-width="100"
                />
                <el-table-column
                    prop="salesman"
                    label="销售人员"
                    min-width="100"
                />
                <el-table-column
                    prop="customerType"
                    label="客户类别"
                    min-width="100"
                />
                <el-table-column
                    prop="customer"
                    label="客户"
                    min-width="140"
                />
                <el-table-column
                    prop="goodsType"
                    label="商品类别"
                    min-width="100"
                />
                <el-table-column
                    prop="goodsNo"
                    label="商品编号"
                    min-width="120"
                />
                <el-table-column
                    prop="goodsName"
                    label="商品名称"
                    min-width="160"
                />
                <el-table-column
                    prop="goodsBarcode"
                    label="商品条码"
                    min-width="140"
                />
                <el-table-column
                    prop="goodsRemark"
                    label="商品备注"
                    min-width="140"
                />
                <el-table-column
                    prop="specModel"
                    label="规格型号"
                    min-width="120"
                />
                <el-table-column
                    prop="brand"
                    label="品牌"
                    min-width="100"
                />
                <el-table-column
                    prop="unit"
                    label="单位"
                    min-width="80"
                />
                <el-table-column
                    prop="warehouse"
                    label="仓库"
                    min-width="100"
                />
                <el-table-column
                    prop="maker"
                    label="制单人"
                    min-width="100"
                />
            </el-table>
        </div>

        <!-- 合计行与分页 -->
        <div class="footer-area flex justify-between items-center mt-4">
          
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,20,30,50, 100, 200, 500]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
            />
            <div class="no-data text-gray-500" v-if="tableData.length === 0">无数据显示</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SalesDetail',
    data() {
        return {
            searchForm: {
                dateRange: ['2025-06-01', '2025-06-25'],
                customer: '',
                goods: '',
                salesman: '',
                maker: '空'
            },
            tableData: [],
            currentPage: 1,
            pageSize: 100,
            total: 0
        }
    },
    methods: {
       
        handleExpand() {
            console.log('点击展开条件')
            // 可扩展实现显示更多查询条件的逻辑
        },
        handleColumnSetting() {
            console.log('点击列设置')
            // 可扩展实现列设置的弹窗、逻辑等
        },
        handleExport() {
            console.log('点击导出')
            // 编写导出逻辑
        },
        handlePrint() {
            console.log('点击打印')
            // 编写打印逻辑
        },
        handleSizeChange(val) {
            this.pageSize = val
          
        },
        handleCurrentChange(val) {
            this.currentPage = val
           
        },
    }
}
</script>

<style scoped>
.sales-detail-container {
    padding: 16px;
    max-width: 1920px;
    margin: 0 auto;
}

.search-area {
    background-color: #f8f9fa;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.search-form .el-form-item__label {
    font-weight: 500;
}

.column-setting {
    margin-bottom: 8px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.table-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.table-actions {
    display: flex;
    gap: 8px;
}

.footer-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.total {
    font-weight: 500;
}

.no-data {
    color: #909399;
}
</style>    